<div style="margin-left: 400px">
  <button style="margin-bottom: 20px" tiButton type="button" (click)="change()">change测试用</button>
  <ti-formfield [title]="title">
    <ti-item [label]="item1.label" [required]="item1.required" [show]="item1.show">
      <button tiButton type="button" (click)="onClick()">Default Button</button>
      <span *ngIf="item1.showSpan">测试1</span>
    </ti-item>
    <ti-item [label]="item2.label" [required]="item2.required">
      <input type="text" tiText style="width: 200px" [(ngModel)]="item2.value" />
    </ti-item>
    <ti-item [required]="item3.required" [show]="item3.show" [label]="item3.label" [verticalAlign]="item3.verticalAlign">
      <span>item3</span>
    </ti-item>
    <ti-item [required]="item4.required" [label]="item4.label" [verticalAlign]="item4.verticalAlign">
      <ti-item-label>
        <span>测试标签dom</span>
        <span *ngIf="item4.labelShow" (click)="onClick()" style="color: blue">按钮</span>
      </ti-item-label>
      <span *ngFor="let item of [1, 2, 3]">{{item}}</span>
    </ti-item>
    <ti-item [required]="item5.required" [show]="item5.show" [verticalAlign]="item5.verticalAlign">
      <ti-item-label>
        <span>存储地址:</span>
      </ti-item-label>
      <textarea style="width: 189px; min-height: 80px" tiTextarea></textarea>
    </ti-item>
    <ti-item [required]="item6.required" [show]="item6.show" [verticalAlign]="item6.verticalAlign">
      <ti-item-label>
        <span>存储地址:</span>
      </ti-item-label>
      <!-- 测试show接口控制表单项隐藏显示，buttongroup的min-width属性 -->
      <ti-button-group minWidth="200px" [items]="item6.options"></ti-button-group>
    </ti-item>
    <ti-formfield-foo></ti-formfield-foo>
    <ti-item [label]="'使用表格控件，文本列不会换行显示'">
      <!--使用表格测试 -->
      <ti-table [(displayedData)]="displayed" [srcData]="srcData">
        <table>
          <thead>
            <tr>
              <th tiOverflow *ngFor="let column of columns" width="{{column.width}}">{{column.title}}</th>
            </tr>
          </thead>
          <tbody>
            <!--注意:ngFor中的displayed数据与displayedData传入的数据一致, 初始化设置为[]即可-->
            <!--为了更好的渲染性能，建议在ngFor数据时总是trackBy数据条目中的某个唯一属性值(如id)-->
            <tr *ngFor="let row of displayed;trackBy: trackByFn">
              <!-- tiOverflow指令的作用是使文本溢出时出'...'，且hover时出tip-->
              <td tiOverflow>{{row.firstName}}</td>
              <td tiOverflow>{{row.lastName}}</td>
              <td tiOverflow>{{row.age}}</td>
              <td tiOverflow>{{row.balance}}</td>
              <td tiOverflow>{{row.email}}</td>
            </tr>
          </tbody>
        </table>
      </ti-table>
    </ti-item>
    <ti-button-item>
      <button tiButton type="button" style="margin-right: 20px">{{button.okLabel}}</button
      ><!--
             --><button tiButton type="button">{{button.cancelLabel}}</button>
    </ti-button-item>
  </ti-formfield>
</div>
